<template>
    <div>
        用户名:<input type="text" v-model="username"><br>
        密码:<input type="text" v-model="password"><br>
        验证码:<input type="text" v-model="ma"><button>{{ createCode() }}</button><br>
        <button class="b1">登录</button>

        <div v-if="error1"><img src="../images/ku.jfif">
            <p>{{ error1 }}</p>
        </div>
    </div>
</template>

<script setup>

import { ref } from 'vue'

const username = ref('')
const password = ref('')
const ma = ref('')
const error1 = ref('')
const error2 = ref('')
const success = ref('')


const createCode = () => {
    var code = ''
    var codeLength = 4
    var random = new Array(
        0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
        'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
    )

    for (var i = 0; i < codeLength; i++) {
        var index = Math.floor(Math.random() * 36)
        code += random[index]
    }
    return code
}


const vo = () => {

    if (username.value !== 'admin' || password.value !== '1234') {
        error2.value = '用户名或者密码错误,请重新输入!'
        success.value = ''
        error1.value = ''
    }

    else {
        success.value = '注册成功,欢迎' + username.value
        error2.value = ''
        error1.value = ''

    }

    if (ma.value !== conde.value) {
        error1.value = '验证码错误，请重新输入!'
    }
}




</script>




<style>
.b1 {
    float: left;
}
</style>